<template>
  <el-popover placement="bottom" :width="300" trigger="click">
    <template #default>
      <slot></slot>
    </template>
    <template #reference>
      <el-badge style="cursor: pointer" :value="value" :max="max" :is-dot="isDot">
        <component :is="`el-icon-${toLine(icon)}`"></component>
      </el-badge>
    </template>
  </el-popover>
</template>

<script lang="ts" setup>
  import {} from 'vue'
  import { toLine } from '../../../utils/index'
  let props = defineProps({
    icon: {
      type: String,
      default: 'Bell'
    },
    // 通知数量
    value: {
      type: [String, Number],
      default: ''
    },
    max: {
      type: Number
    },
    isDot: {
      type: Boolean,
      default: false
    }
  })
</script>
<style lang="scss" scoped></style>
